<template>
    <div class="front-home">
        <el-row :gutter="20">
            <el-col :span="16">
                <el-carousel indicator-position="outside">
                    <el-carousel-item v-for="item in images" :key="item">
                        <el-image fit="cover" style="width: 100%;height: 100%"  :src="item"></el-image>
                    </el-carousel-item>
                </el-carousel>
                <div>
                    <Article v-for="item in articles"  :key="item"></Article>
                </div>
            </el-col>
            <el-col :span="8">
                <visiting-card></visiting-card>
                <click-rank></click-rank>
                <author-recommand></author-recommand>
                <lately-comments></lately-comments>
                <lately-message></lately-message>
                <time-line></time-line>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import VisitingCard from "../../components/VisitingCard";
    import ClickRank from "../../components/ClickRank";
    import AuthorRecommand from "../../components/AuthorReCommand";
    import LatelyComments from "../../components/LatelyComments";
    import LatelyMessage from "../../components/LatelyMessage";
    import Article from "../../components/Article";
    import TimeLine from "../../components/TimeLine";
    export default {
        name: "Home",
        components: {TimeLine, Article, LatelyMessage, LatelyComments, AuthorRecommand, ClickRank, VisitingCard},
        data() {
            return {
                images: [
                    require("../../assets/8.jpg"),
                    require("../../assets/9.jpg"),
                    require("../../assets/10.jpeg"),
                    require("../../assets/11.jpg")
                ],
                articles:5
            }
        },
        methods:{

        }
    }
</script>

<style scoped>

</style>